<template>




  <div>
    <el-dialog class="abow_dialog"
               :close-on-click-modal="false"
               modal-append-to-body
               :append-to-body="true"
               title="表操作"
               width="75%"
               top="10vh"
               :visible.sync="visible"
               @close="$emit('update:singleShow', false)"
               :show="singleShow">
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="basic">
            <el-form  label-width="78px" :model="queryParams" ref="queryForm" :inline="true" >
              <el-form-item label="表名称" prop="tableName">
                <el-input
                  v-model="queryParams.tableName"
                  placeholder="请输入表名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="表描述" prop="tableComment">
                <el-input
                  v-model="queryParams.tableComment"
                  placeholder="请输入表描述"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row>
              <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="460px">
                <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
              </el-table>
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="字段信息" name="cloum">
            <el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight">
              <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
              <el-table-column
                label="字段列名"
                prop="columnKey"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="字段描述">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.description"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="dataType"
                label="操作"
              >
                <template slot-scope="scope">
                  <Button type="success" @click="removeRight(scope.$index)">删除</Button>
                </template>

              </el-table-column>


            </el-table>
          </el-tab-pane>
        </el-tabs>





      </div>
      <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmDialog">确定</el-button>
       <el-button @click="visible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
  import { listDbTable } from "@/api/tool/gen";
  import {
    businessTableColumnMetadataInfoByTableName
  } from '@/api/form'
  export default {
    methods: {
      removeRight: function (index) {
        this.cloumns.splice(index, 1);
      },
      handleStep:function(){
        this.active=1
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.tables = selection.map(item => item.tableName);
      },
      clickRow(row) {
       var tableName=  row.tableName;
        businessTableColumnMetadataInfoByTableName(tableName).then((response) => {
          if (response.code == 0) {
            var data = response.data;
            this.cloumns= data;
          }


        })

        this.$refs.table.toggleRowSelection(row);
      },
      mount() {
      },
      created() {
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      resetQuery:function(){
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 查询表数据
      getList() {
        listDbTable(this.queryParams).then(res => {
          if (res.code === 0) {
            this.dbTableList = res.data;
            this.total = res.count;
          }
        });
      },

      reset: function () {
         this.resetQuery();
        this.getAllBus();
      },
      search: function () {
      },
      changePanelUser: function (page) {
        this.queryForm.page = page;
      },
      cancelSelectionChange: function (selection, row) {
        this.showTableData = existData;

      },
      operateTable: function (selection) {
        var array = this.showTableData.concat(selection)
        var newArray = this.unique(array);
        this.showTableData = newArray;
      },

      confirmDialog() {

        this.filedVisibleShow=true
        if (this.onOk) {
           this.visible = false
           this.onOk(this.cloumns);
        }
      },
      changePanel: function (data) {
      }
    },
    data() {

      return {
        activeName: "basic",

        // 表格的高度
        tableHeight: document.documentElement.scrollHeight - 245 + "px",
        // 表列信息
        cloumns: [],
        active: 0,
        // 遮罩层
        visible: false,
        filedVisible: false,
        filedVisibleShow: false,
        // 选中数组值
        tables: [],
        // 总条数
        total: 0,
        // 表数据
        dbTableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          tableName: undefined,
          tableComment: undefined
        }
      }
    },
    mount() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    props: {
      singleShow: {
        type: Boolean,
        default: false
      },
      onOk: {    //定义onOK属性
        type: Function
      },
      existData: {
        type: Object,
        default: () => ({})

      },

    },
    watch:{
      singleShow() {
        this.handleQuery();
        this.activeName='basic'
        this.cloumns=[]
        this.visible = this.singleShow;
        }


    }
  };
</script>
<style lang="scss">

</style>
